<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>在线商城-首页</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/static/js/slide.js"></script>
</head>
<body>
<div class="header_con">
    <div class="header">
        <div class="welcome fl">欢迎来到在线商城!</div>
        <div class="fr">
            {{if compare .userName ""}}
            <div class="login_btn fl">
                <a href="/login">登录</a>
                <span>|</span>
                <a href="/register">注册</a>
            </div>
            {{else}}
            <div class="login_btn fl">
                欢迎您：<em>{{.userName}}</em>
                <span>|</span>
                <a href="/user/logout">退出登录</a>
            </div>
            {{end}}
            <div class="user_link fl">
                <span>|</span>
                <a href="/user/userCenterInfo">用户中心</a>
                <span>|</span>
                <a href="/user/cart">我的购物车</a>
                <span>|</span>
                <a href="user_center_order.html">我的订单</a>
            </div>
        </div>
    </div>
</div>

<div class="search_bar clearfix">
    <a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<div class="total_count">全部商品<em>{{.totalCount}}</em>件</div>
<ul class="cart_list_th clearfix">
    <li class="col01">商品名称</li>
    <li class="col02">商品单位</li>
    <li class="col03">商品价格</li>
    <li class="col04">数量</li>
    <li class="col05">小计</li>
    <li class="col06">操作</li>
</ul>
{{range .goods}}
<ul class="cart_list_td clearfix">
    <li class="col01"><input type="checkbox" name="" checked></li>
    <li class="col02"><img src="http://192.168.8.136:8888/{{.goodsSku.Image}}"></li>
    <li class="col03">{{.goodsSku.Name}}<br><em>{{.goodsSku.Price}}元/{{.goodsSku.Unite}}</em></li>
    <li class="col04">{{.goodsSku.Unite}}</li>
    <li class="col05">{{.goodsSku.Price}}元</li>
    <li class="col06">
        <div class="num_add">
            <a href="javascript:;" class="add fl">+</a>
            <input type="text" class="num_show fl" skuid="{{.goodsSku.Id}}" value={{.count}}>
            <a href="javascript:;" class="minus fl">-</a>
        </div>
    </li>
    <li class="col07">{{.addPrice}}元</li>
    <li class="col08"><a href="javascript:;" class="deleteCart" skuid="{{.goodsSku.Id}}">删除</a></li>
</ul>
{{end}}

<ul class="settlements">
    <li class="col01"><input type="checkbox" name="" checked=""></li>
    <li class="col02">全选</li>
    <li class="col03">合计(不含运费)：<span>¥</span><em>{{.totalPrice}}</em><br>共计<b>{{.totalCount}}</b>件商品</li>
    <li class="col04"><a href="place_order.html">去结算</a></li>
</ul>

<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 浙江在线商城信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-0000000 浙ICP备*******8号</p>
</div>

</body>
</html>
<script type="text/javascript">
    function UpdateGoodsPrice() {
        totalCount = 0
        totalPrice = 0
        // 找到选中状态的父标签,并遍历每一个父标签
        $(".cart_list_td").find(':checked').parents('ul').each(function () {
            count = $(this).find('.num_show').val()
            price = $(this).children('.col07').text()

            price = parseFloat(price)
            count = parseInt(count)

            // 叠加
            totalCount += count
            totalPrice += price
        })

        $('.settlements').children('.col03').children('em').text(totalPrice)
        $('.settlements').children('.col03').children('b').text(totalCount)
    }

    // 设置全选和全不全装填
    $('.settlements').find(':checkbox').change(function () {
        is_checked = $(this).prop('checked')

        $('.cart_list_td').find(':checkbox').each(function () {
            $(this).prop('checked', is_checked)
        })
        UpdateGoodsPrice()
    })

    // 根据商品的改变 改变全选状态
    $('.cart_list_td').find(':checkbox').change(function () {
        checkboxLength = $('.cart_list_td').find(':checkbox').length
        checkedLength = $('.cart_list_td').find(':checked').length

        if (checkboxLength > checkedLength) {
            // 没有全部选中
            $('.settlements').find(':checkbox').prop('checked', '')
        } else {
            $('.settlements').find(':checkbox').prop('checked', 'checked')
        }
        UpdateGoodsPrice()
    })

    // 添加商品数量
    $('.add').click(function () {
        count = $(this).next().val()
        count = parseInt(count) + 1

        skuid = $(this).next().attr('skuid')
        errUpdate = false

        // 设置ajax同步
        $.ajaxSettings.async = false
        param = {"skuid": skuid, "count": count}
        $.post('/user/UpdateCart', param, function (data) {
            // errUpdate = data.code !== 5;
            if (data.code === 5) {
                errUpdate = false
            } else {
                errUpdate = true
            }
        })
        $.ajaxSettings.async = true
        if (!errUpdate) {
            $(this).next().val(count)
            // 计算小计
            // 获取单价 获取数量
            price = $(this).parents('ul').children('.col05').text()
            price = parseFloat(price)
            amount = count * price
            $(this).parents('ul').children('.col07').text(amount.toFixed(2) + '元')
        }

        isChecked = $(this).parents('ul').find(':checkbox').prop('checked')
        if (isChecked) {
            UpdateGoodsPrice()
        }
    })

    // 减少商品数量
    $('.minus').click(function () {
        count = $(this).prev().val()
        count = parseInt(count) - 1
        if (count === 0) {
            count = 1
            $(this).prev().val(count)
            return
        }
        skuid = $(this).prev().attr('skuid')
        param = {"skuid": skuid, 'count': count}
        $.ajaxSettings.async = false
        $.post('/user/UpdateCart', param, function (data) {
            if (data.code === 5) {
                errUpdate = false
            } else {
                errUpdate = true
                alert(data.errmsg)
            }
        })
        $.ajaxSettings.async = true
        if (!errUpdate) {
            $(this).prev().val(count)
            // 计算小计
            price = $(this).parents('ul').children('.col05').text()
            price = parseFloat(price)

            amount = price * count
            $(this).parents('ul').children('.col07').text(amount.toFixed(2) + "元")
        }

        isChecked = $(this).parents('ul').find(':checkbox').prop('checked')
        if (isChecked) {
            UpdateGoodsPrice()
        }
    })

    // 获取之前的数量
    preCount = 0
    $('.num_show').focus(function () {
        preCount = $(this).val()
    })
    preCount = $('.num_show').val()
    $('.num_show').blur(function () {
        // 手动输入商品数量
        count = $(this).val()
        // 输入不正确的情况
        if (isNaN(count) || count.trim().length === 0 || parseInt(count) < 0) {
            count = preCount
            return
        }
        skuid = $(this).attr('skuid')
        count = parseInt(count)
        param = {'skuid': skuid, 'count': count}
        $.ajaxSettings.async = false
        $.post('/user/UpdateCart', param, function (data) {
            errUpdate = data.code !== 5;
        })
        $.ajaxSettings.async = true
        if (!errUpdate) {
            $(this).val(count)
            // 计算小计
            price = $(this).parents('ul').children('.col05').text()
            price = parseFloat(price)

            amount = price * count
            $(this).parents('ul').children('.col07').text(amount.toFixed(2) + "元")
        }
        isChecked = $(this).parents('ul').find(':checkbox').prop('checked')
        if (isChecked){
            UpdateGoodsPrice()
        }
    })

    // 删除商品
    $('.deleteCart').click(function () {
        skuid = $(this).attr('skuid')
        param = {'skuid':skuid}
        $.ajaxSettings.async = false
        $.post('/user/deleteCart',param,function (data) {
            if (data.code === 5){
                errUpdate = false
            }else {
                errUpdate = true
                alert(data.errmsg)
            }
        })
        $.ajaxSettings.async = true
        if (!errUpdate){
            $(this).parents('ul').remove()
        }
        isChecked = $(this).parents('ul').find(':checkbox').prop('checked')
        if (isChecked){
            UpdateGoodsPrice()
        }
    })
    //TODO:"H:\学习\编程\go\Go语言与区块链在线就业班\阶段3  去中心化前端开发与web服务器开发\3-14 电商商城项目\第6节 获取购物车条目数\7_订单页面展示.mp4"
</script>